<template>
  <div id="pie" ref="chartDom" style="width: 100%; height: 100%;"></div>
</template>

<script setup name="Pie">
import * as echarts from 'echarts';
import { nextTick, reactive, ref, toRefs, watch } from 'vue';

const props = defineProps({
  option: {
    type: Object,
    default: {},
  },
  seriesData: {
    type: Array,
    default: [
      // {value: 22, name: "国内500强客户", color: "#fd904c"},
      // {value: 34, name: "世界500强客户", color: "#ffb800"},
      // {value: 89, name: "地方百强客户", color: "#4490d9"},
      // {value: 10, name: "其他客户", color: "#b0d8fc"},
    ],
  },
});
const chartDom = ref(null)
let myChart = reactive({})
let option = reactive({})

const getEchartsData = (_option) => {
  var data = props.seriesData.map(item => {
    return {
      value: item.value,
      name: item.name,
      itemStyle: { color: item.color }
    }
  })
  option = {
    tooltip: {
      trigger: "item",
      formatter: "{b} : {c} ({d}%)"
    },
    series: [
      {
        type: "pie",
        radius: "50%",//饼大小
        avoidLabelOverlap: true,
        label: {
          itemStyle: {
            formatter: "{b} ：{c}\n占比：{d}%",
            color: "#333", // 改变标示文字的颜色
            fontSize: 12,
            emphasis: {
              show: true,
              fontSize: "12",
              fontWeight: "normal"
            }
          },
        },
        labelLine: { //线
          show: true
        },
        data
      }
    ]
  };
  option && myChart.setOption(_option ? _option : option, { notMerge: true });
  myChart.resize();
}
nextTick(() => {
  myChart = echarts.init(chartDom.value);
  getEchartsData();
  window.addEventListener('resize', () => {
    myChart.resize();
  });
});

const updateEchart = () => {
  nextTick(() => {
    const newData = {
      xAxis: {
        data: props.Xdata
      },
      series: {
        data: props.seriesData
      }
    }
    myChart.setOption(newData);
    myChart.resize();
  })
}
defineExpose({
  updateEchart
})

watch(() => props.Xdata, (newVal, oldVal) => {
  updateEchart();
}, { deep: true });
</script>